<template>
  <el-table
     v-loading="loading"
    :data="categories"
    stripe>
    <el-table-column
      fixed
      prop="id"
      label="序号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="景点">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="215">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="edit(scope.$index)"
          class="el-icon-edit">
          编辑
        </el-button>
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData4)"
          class="el-icon-delete">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script>
/* eslint-disable */
export default {
  methods: {
    edit(index) {
      this.$router.push({ name: 'PlaceEdit', params: { placeId: index }})
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    }
  },
  created: function() {
    this.$http.get("http://istour.isaced.com/api/places").then(response => response.json())
    .then(json => {
        // get body data
        this.categories = json;
        this.loading = false;
      },
      response => {
        // error callback
        console.log('error');
        console.log(response)
      }
    );
  },
  data() {
    return {
      categories: [],
      loading: true
    };
  }
};
</script>
